<template>
  <transition :name="'tz-popover-zoom-' + position">
    <view
      v-show="modelValue"
      :catch-move="true"
      :style="state.style"
      :class="['tz-popover', 'tz-popover--' + position]"
    >
      <slot />
    </view>
  </transition>
</template>
<script>
import { reactive, watch } from "vue";
export default {
  name: "Popover",
  inheritAttrs: false,
  props: {
    modelValue: {
      type: Boolean,
      default: true,
    },
    overlay: {
      type: Boolean,
      default: true,
    },
    position: {
      default: "top",
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return ["top", "bottom", "right", "left"].includes(value);
      },
    },
    duration: {
      type: Number,
      default: 3000,
    },
    height: {
      type: String,
      default: "30%",
    },
    offset: {
      type: [String, Number],
      default: 0,
    },
  },
  emits: ["close", "open", "update:modelValue"],
  setup(props, { emit }) {
    const state = reactive({
      style: {
        animationduration: "0.3s",
      },
    });

    watch(
      () => props.offset,
      () => {
        state.style[props.position] = 1 + props.offset + "px";
      }
    );
    const close = () => {
      emit("close");
      emit("update:modelValue", false);
    };

    const open = () => {
      emit("open");
      emit("update:modelValue", true);
    };

    //点击蒙层
    const handleOverClick = () => {
      close();
    };

    return { state, open, close, handleOverClick };
  },
};
</script>

<style lang="scss">
$--el-transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
  opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);

.tz-popover {
  z-index: 2001;
  word-wrap: break-word;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  background: $white;
  transition: $--el-transition-md-fade;
  transform-origin: top;
  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.1);

  &--top {
    left: 0;
    width: 100%;
  }

  &--bottom {
    left: 0;
    width: 100%;
  }
}

.tz-popover-zoom-top {
  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: scaleY(0);
  }
}

.tz-popover-zoom-bottom {
  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: scaleY(0);
  }
}

.tz-popover-zoom-top,
.tz-popover-zoom-bottom {
  &-enter-active,
  &-leave-active {
    transition: $--el-transition-md-fade;
    transform-origin: top;
  }

  &-enter-to {
    opacity: 1;
    transform: scaleY(1);
  }
  &-leave-from {
    transform: translateZ(0);
  }
}
</style>
